<%--
  Created by IntelliJ IDEA.
  User: 86189
  Date: 2021/8/20
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>每一朵云</title>
    <link rel="icon" href="../images/13.jpg">
</head>
<body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>翻书效果</title>

    <style type="text/css">
        body{
            width: 100%;
            height: 100%;
        }
        #center{margin:20px auto;}
        #dhtmlbook{background:#000;visibility:hidden;width:1500px;position:relative;height:820px}
        #txtbox{font-size:0.8em;width:410px;color:#aba193;font-family:Verdana, Arial, Helvetica, sans-serif;position:absolute;top:320px;text-align:center}
        .page{overflow:hidden;border-left:#000000 1px solid;width:50%;cursor:pointer;position:absolute;height:100%}
        .right{border-right:#000000 1px solid;left:50%}
        .turn{background:#000000}
        .img{width:200%;position:absolute;height:100%}
    </style>

    <script type="text/javascript">
        document.onselectstart = function () { return false; }

        var nI  = 0;
        var kI  = 0;
        var run = false;

        function setOpacity(obj,o) {
            if (o<0) o=0; else if (o>100) o = 100;
            if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
        }
        function TPR__(p) {
            P1.style.left  = 50-(2.5*p)+"%";
            P1.style.width = (2.5*p)+"%";
            setOpacity(P1i, .5*p*p);
            if (p == 20) run = false;
        }
        function TPR_(p) {
            P2.style.width = 50-(2.5*p)+"%";
            setOpacity(P2i, 100-.5*(p*p));
            if (p == 20) {
                P2i.src = imgSRC[kI].src;
                setOpacity(P2i, 100);
                P2.style.width = "50%";
                for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
            }
        }
        function TPR() {
            if (!run) {
                run = true;
                P01i.src = imgSRC[kI].src;
                P1.style.width = 0;
                kI++;
                if (kI>=nI) kI = 0;
                titLe(kI);
                P02i.src = imgSRC[kI].src;
                P1i.src  = imgSRC[kI].src;
                for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
            } else setTimeout("TPR()", 100);
        }

        function TPL__(p) {
            P2.style.width = (2.5*p)+"%";
            setOpacity(P2i, .5*p*p);
            if (p == 20) run = false;
        }
        function TPL_(p) {
            P1.style.left  = (2.5*p)+"%";
            P1.style.width = 40+(10-2.5*p)+"%";
            setOpacity(P1i, 100-.5*(p*p));
            if (p == 20) {
                P1i.src = imgSRC[kI].src;
                setOpacity(P1i, 100);
                P1.style.left  = 0;
                P1.style.width = "50%";
                for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
            }
        }
        function TPL() {
            if (!run) {
                run = true;
                P02i.src = imgSRC[kI].src;
                P2.style.width = 0;
                kI--;
                if (kI < 0) kI = nI-1;
                titLe(kI);
                P01i.src = imgSRC[kI].src;
                P2i.src  = imgSRC[kI].src;
                for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
            } else setTimeout("TPL()", 100);
        }
        function titLe(p) {
            document.getElementById("txtbox").innerHTML = imgSRC[p].alt;
        }
        onload = function() {
            imgSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
            DB      = document.getElementById("dhtmlbook");
            P01     = DB.getElementsByTagName("span")[0];
            P01i    = P01.getElementsByTagName("img")[0];
            P02     = DB.getElementsByTagName("span")[1];
            P02i    = P02.getElementsByTagName("img")[0];
            P1      = DB.getElementsByTagName("span")[2];
            P1i     = P1.getElementsByTagName("img")[0];
            P2      = DB.getElementsByTagName("span")[3];
            P2i     = P2.getElementsByTagName("img")[0];
            nI      = imgSRC.length;
            P1i.src = imgSRC[kI].src;
            P2i.src = imgSRC[kI].src;
            titLe(kI);
            DB.style.visibility = "visible";
        }
    </script>


</head>

<body>

<div id="center">
    <div id="dhtmlbook">
        <span class="page" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><img class="img"></span>
        <span class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><img class="img" style="left:-100%"></span>
        <span class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><img class="img" style="filter:alpha();opacity:1"></span>
        <span class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><img class="img" style="filter:alpha();left:-100%;opacity:1"></span>
        <div id="txtbox"></div>
    </div>
</div>

<div id="imgsrc" style="visibility:hidden">
    <img alt="1" src="../images/11.jpg">
    <img alt="2" src="../images/8.jpg">
    <img alt="3" src="../images/9.jpg">
    <img alt="4" src="../images/20.jpg">
    <img alt="5" src="../images/21.jpg">
    <img alt="6" src="../images/6.jpg">
    <img alt="7" src="../images/12.jpg">
</div>


</body>
</html>

</body>
</html>
